<template>
<van-tabs active="a">
  <van-tab title="开盒的物" name="a">
    <div class="mainbody">
    <div class="pic">
      <span><img src="" alt=""></span>
    </div>
    <div class="tips">
      <p>您的背包还没有开启的物</p>
    </div>
  </div>
  <div class="homepage">
    <button @onclick="gotolink" class="btn-sy">去首页开盒</button>
  </div>
<div class="tips">
  <p>开盒的物是指在商城开盒所得的物品</p>
</div></van-tab>
  <van-tab title="置换的物" name="b">
    <van-card
  num="1"
  tag="标签"
  price="10.00"
  desc="描述信息"
  title="商品标题"
  thumb="{{ imageURL }}"
>
  <view slot="footer">
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </view>
</van-card>
<van-card
  num="1"
  tag="标签"
  price="10.00"
  desc="描述信息"
  title="商品标题"
  thumb="{{ imageURL }}"
>
  <view slot="footer">
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </view>
</van-card>

  </van-tab>
  <van-tab title="星值的物" name="c"></van-tab>
</van-tabs>

</template>

<script>
export default {
  methods:{
    gotolink(){
      this.$router.replace({name:'shouye'})
    }
  }
};
</script>

<style>
*{
  margin: 0;
  padding: 0;
  font-size: 16px;
}
.nav{
  width: 300px;
  height: 35px;
}
.nav div{
  width: 98px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  float: left;
}
.pic{
  width: 120px;
  height: 120px;
  margin: 20px auto;
  background-color: aqua;
}
.tips{
  text-align: center;
  margin-top:20px ;
}
.homepage{
  text-align: center;
}
</style>
